var movement = false;
var Canvas;
var canvas_context;
var canvas_base;
var canvas_base_context;
var cordX;
var cordY;
var current_tool;
var shapes = [];
var previousSelectedShape;
var is_selecting_shape;
var olwidth;
var olcolor;
var fcolor;

function canvas_init(){
    /*Canvas = document.getElementById("canvas");
     canvas_context = Canvas.getContext("2d");
     Canvas.addEventListener('mousemove', event_handle, false);
     Canvas.addEventListener('mouseup', event_handle, false);
     Canvas.addEventListener('mousedown',   event_handle, false);*/
    
    canvas_base = document.getElementById("basecanvas");
    canvas_base_context = canvas_base.getContext("2d");
    var container = canvas_base.parentNode;
    
    Canvas = document.createElement("canvas");
    if (!Canvas) {
        alert('Error: I cannot create a new canvas element!');
        return;
    }
    
    Canvas.id = "canvas";
    Canvas.width = canvas_base.width;
    Canvas.height = canvas_base.height;
    container.appendChild(Canvas);
    
    canvas_context = Canvas.getContext("2d");
    
    Canvas.addEventListener('mousemove', event_handle, false);
    Canvas.addEventListener('mouseup', event_handle, false);
    Canvas.addEventListener('mousedown',   event_handle, false);
    
    var selectedValue = $('#shapeselected').val();
    
    
    if (selectedValue == 'Straight Line'){
        current_tool = new SLine();
    }else if(selectedValue == 'Circle'){
        current_tool = new Circle();
    }else if(selectedValue == 'Rectangle'){
        current_tool = new Rectangle();
    }else if (selectedValue == 'Select_and_move_shape'){
        current_tool = null;
    }
}

function change_tool(event){
    //console.log("change triggered");
    var selectedValue = $('#shapeselected').val();
    if (selectedValue == 'Straight Line'){
        //console.log("in straight line");
        current_tool = new SLine();
    }else if(selectedValue == 'Circle'){
        current_tool = new Circle();
    }else if(selectedValue == 'Rectangle'){
        current_tool = new Rectangle();
        console.log("create new rectangle");
    }else if (selectedValue == 'Select_and_move_shape'){
        //current_tool = null;
        //shapeClicked(event);
    }
}


function event_handle(event){
    //console.log("in event handle");
    updateMouseCoordinates(event);
    var event_type = event.type;
    var func = current_tool[event_type];
    if(func){
        func(event);
    }
    
}

SLine = function(){
    this.isdrawing = false;
    
    this.mousedown = function(event){
        
    	olwidth = $("input[id=olw]").val();
        console.log("pressing down");
        var selectedValue = $('#shapeselected').val();
        if (selectedValue != 'Select_and_move_shape'){
        	if (olwidth <= 10){
        		this.isdrawing = true;
        		this.origin_x = cordX;
        		this.origin_y = cordY;
        	}
        	else {alert("Width too big. (between 1-10)");
        		document.getElementById("olw").value = 1;
        	}
        }else{
            shapeClicked(event);
        }
    };
    
    this.mousemove = function(event){
    	
        if(this.isdrawing){
        	var strokestyle;
        	olcolor = $("select[id=olc]").val();
        	if (olcolor === "Default"){
        		strokestyle = "black";
        	}
        	else{
        		strokestyle = olcolor;
        	}
            canvas_context.clearRect(0, 0, Canvas.width, Canvas.height);
            canvas_context.beginPath();
            canvas_context.moveTo(this.origin_x, this.origin_y);
            canvas_context.lineTo(cordX, cordY);
            canvas_context.strokeStyle = strokestyle;
            canvas_context.lineWidth = olwidth;
            canvas_context.stroke();
            canvas_context.closePath();
            //console.log(cordX, cordY);
            //console.log("I am drawing straight line");
            
        }
    };
    
    this.mouseup = function(event){
        this.isdrawing = false;
        //this.mousemove(event);
        draw_into_base();
        //console.log("this.isdrawing is " + this.isdrawing);
    };
    
}

Rectangle = function(){
    this.isdrawing = false;
    
    this.mousedown = function(event){
       
    	olwidth = $("input[id=olw]").val();
    	if (olwidth <= 10){
        	this.isdrawing = true;
        	this.origin_x = cordX;
        	this.origin_y = cordY;
            
            //canvas_context.moveTo(cordX, cordY);
        	console.log("drawing retangle");
    	}
		else {alert("Width too big. (between 1-10)");
			document.getElementById("olw").value = 1;
		}
    };
    
    this.mousemove = function(event){
        if(this.isdrawing){
            fcolor = $("select[id=fc]").val();
            var cord_x = Math.min(cordX,  this.origin_x);
            var cord_y = Math.min(cordY,  this.origin_y);
            var weight = Math.abs(cordX - this.origin_x);
            var height = Math.abs(cordY - this.origin_y);
            olwidth = $("input[id=olw]").val();
            var strokestyle;
            olcolor = $("select[id=olc]").val();
            if (olcolor === "Default"){
                strokestyle = "black";
            }
            else{
                strokestyle = olcolor;
            }
            canvas_context.fill();
            canvas_context.lineWidth = olwidth;
            canvas_context.strokeStyle = strokestyle;
            canvas_context.clearRect(0, 0, Canvas.width, Canvas.height);
            if (fcolor !== "Clear"){
                canvas_context.fillStyle = fcolor;
                canvas_context.fillRect(cord_x, cord_y, weight, height);
            }
            canvas_context.strokeRect(cord_x, cord_y, weight, height);
            console.log(canvas_context.fillStyle);
        }
    };

    this.mouseup = function(event){
        this.isdrawing = false;
        //this.mousemove(event);
        draw_into_base();
        console.log("this.isdrawing is " + this.isdrawing);
    };
    
}

Circle = function(){
    this.isdrawing = false;
    this.context;
    this.isSelected = false;
    this.radius;
    this.origin_x;
    this.origin_y;
    
    this.mousedown = function(event){
        olwidth = $("input[id=olw]").val();
        var selectedValue = $('#shapeselected').val();
        if (selectedValue != 'Select_and_move_shape'){
            if (olwidth <= 10){
                this.isdrawing = true;
                this.origin_x = cordX;
                this.origin_y = cordY;
                
                //canvas_context.moveTo(cordX, cordY);
                
            }
            else {alert("Width too big. (between 1-10)");
                document.getElementById("olw").value = 1;
            }
        }else{
            shapeClicked(event);
        }
    };
    
    this.mousemove = function(event){
        if(this.isdrawing){
            fcolor = $("select[id=fc]").val();
            olwidth = $("input[id=olw]").val();
            canvas_context.lineWidth = olwidth;
            
            this.context = Canvas.getContext("2d");
            var strokestyle;
            olcolor = $("select[id=olc]").val();
            if (olcolor === "Default"){
                strokestyle = "black";
            }
            else{
                strokestyle = olcolor;
            }
            canvas_context.clearRect(0, 0, Canvas.width, Canvas.height);
            this.context.beginPath();
            this.context.arc(this.origin_x,this.origin_y,Math.abs(cordX - this.origin_x),0,2*Math.PI);
            if (fcolor !== "Clear"){
                this.canvas_context.fillStyle = fcolor;
                this.canvas_context.fill();
            }
            this.context.strokeStyle=strokestyle;
            this.context.stroke();
            
        }
    };
    
    this.mouseup = function(event){
        if(this.isdrawing != false){
            this.radius = Math.abs(cordX - this.origin_x);
            draw_into_base();
            console.log("this.isdrawing is " + this.isdrawing);
            //console.log(current_tool);
            current_tool.origin_x = this.origin_x;
            current_tool.origin_y = this.origin_y;
            current_tool.radius = this.radius;
            shapes.push(current_tool);
            this.isdrawing = false;
        }
    };
    
    this.testHit = function(testX,testY){
        console.log("x, y" + this.radius);
	    var distanceFromCenter = Math.sqrt(Math.pow(this.origin_x - testX, 2) + Math.pow(this.origin_y - testY, 2));
	    console.log("this distance from center is " + distanceFromCenter);
	    if (distanceFromCenter <= this.radius)
		    return true;
	    return false;
    };
    
    this.highlight = function(){
        console.log("highlighting");
        this.context = Canvas.getContext("2d");
    	this.context.lineWidth = 5;
    	canvas_context.clearRect(0, 0, Canvas.width, Canvas.height);
        this.context.beginPath();
        this.context.arc(this.origin_x,this.origin_y,this.radius,0,2*Math.PI);
        this.context.stroke();
        draw_into_base();
    };
    
}


function draw_into_base(){
    canvas_base_context.drawImage(Canvas, 0, 0);
    canvas_context.clearRect(0, 0, Canvas.width, Canvas.height);
}

function updateMouseCoordinates(event)  {
    //var coordinates = document.getElementById("coordinates");
    cordX = event.layerX;
    cordY = event.layerY;
    //cordX = event.pageX - canvas.offsetLeft;
    //cordY = event.pageY - canvas.offsetTop;
    //canvas_context.beginPath();
    //canvas_context.moveTo(cordX, cordY);
    coordinates.innerHTML = " (" + cordX + ", " + cordY + ")";
    //if (movement){
    //  move(event);
    //}
}

function shapeClicked(event){
    for(var i = shapes.length - 1; i >= 0; i--) {
        var shape = shapes[i];
        console.log(shape);
        if (shape.testHit(cordX,cordY)) {
            if (previousSelectedShape != null){
                previousSelectedShape.isSelected = false;
                
            }
            previousSelectedShape = shape;
            
            shape.isSelected = true;
            
            shape.highlight();
            return;
        }
    }
}



